<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todo</title>
    <style>
        #todo{
            width: 800px;
            margin: 0 auto;
        }
        #todo > input{
            width: 100%;
        }
        .done span{
            text-decoration: line-through;
        }
        li p input{
            display: none;
        }
        li.editing p input{
            display: block;
        }
        li.editing .view{
            display: none;
        }
    </style>
</head>
<body>
    <div id="todo">
        <input @keyup.enter="add" type="text" placeholder="开始新建你的任务吧" v-model="todo">
        
        <ol reversed>
            <li v-for="todo in todos" :class="{done : todo.done, editing : todo == editedTodo}">
                <div class="view">
                    <span @dblclick="edit(todo)">{{todo.title}}</span>
                    <span>{{todo.created_at}}</span>

                    <button @click="del(todo)">X</button>
                    <input type="checkbox" v-model="todo.done" />
                </div>
                <p><input @blur="editDone(todo)" @keyup.enter="editDone(todo)" type="text" v-model="todo.title"></p>
            </li>
        </ol>

    </div>
 
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
        var STORAGE_KEY = "todos"
        var todoStorage = {
            fetch: function () {
                var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
                // todos = todos.reverse()
               /* todos.forEach(function (todo, index) {
                    console.log(todo,index)
                    todo.id = index
                })
                todoStorage.uid = todos.length*/
                return todos
            },
            save: function (todos) {
                localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
            }
        }

        new Vue({
            el: '#todo',
            data:{
                todos: todoStorage.fetch(),
                todo: '',
                editedTodo : null
            },
            methods: {
                add: function (event) {
                    var todo = this.todo && this.todo.trim()
                    if (!todo) {
                        return 
                    }
                    this.todos.reverse()
                    this.todos.push({
                        title: todo,
                        edit: false,
                        done: false,
                        created_at: new Date()
                    })
                    this.todos.reverse()
                    this.todo = ''
                },
                del: function (todo) {
                    this.todos.splice(this.todos.indexOf(todo), 1)
                },
                edit: function (todo) {
                    this.editedTodo = todo
                },
                editDone: function (todo) {
                    this.editedTodo = false
                }
            },
            watch: {
                todos: {
                    handler: function (todos) {
                        todoStorage.save(todos)
                    },
                    deep: true
                }
            }
        })    
    </script>
</body>
</html>